import { BlurFilter } from "pixi.js";
import { Stage, Container, Sprite, Text, useApp } from "@pixi/react";
import { useEffect, useMemo } from "react";
import { ControllerInstance } from "../controllers";
import { useStore } from "@store/hooks";
import { observer } from "mobx-react";
import useTicker from "@hooks/useTicker";
import ViewConfig from "./config";
import "./index.scss";
import usePixi from "@/hooks/usePixi";
import useMount from "@/hooks/useMount";
import toast from "react-hot-toast";
import Locale from "@/locale";
import useAysis from "@/affets/hooks/useAysis";
import config from "@/affets/assets/aysis.cfg";

enum Myth {
  Deg = Math.PI / 180,
}

interface ViewProps {
  controllerRef: React.MutableRefObject<ControllerInstance | null>;
}

const View = observer(({ controllerRef }: ViewProps) => {
  const app = useApp();
  const blurFilter = useMemo(() => new BlurFilter(4), []);
  const { site, hero } = useStore();
  const i = useTicker(
    (_i) => {
      // toast(`${Math.sin((Math.PI / 180) * _i) * 30}`);
    },
    {
      pauseAtFirst: false,
      immediate: true,
      duration: 1000 / 60,
    }
  );

  useMount(() => {
    toast(Locale.zh.mounted);
  });

  const aysis = useAysis({
    config: config,
    image: "",
  });

  return (
    <div
      className="App-view"
      style={{
        left: `calc(50% - ${site.x}px)`,
        top: `calc(50% - ${site.y}px)`,
      }}
    >
      <Stage
        className="App-view-stage"
        width={ViewConfig.stageWidth}
        height={ViewConfig.stageHeight}
        onPointerDown={(e) => {
          const clickSite = __ph(e).getRertSite();
          if (
            clickSite.x < site.x + 50 + ViewConfig.stageWidth / 2 &&
            clickSite.x > site.x - 50 + ViewConfig.stageWidth / 2 &&
            clickSite.y < site.y + 50 + ViewConfig.stageHeight / 2 &&
            clickSite.y > site.y - 50 + ViewConfig.stageHeight / 2
          ) {
            controllerRef.current?.handleHeroClick?.();
          }
        }}
        options={{
          backgroundAlpha: 0,
          antialias: true,
        }}
      >
        <Container position={[400, 300]}>
          <Sprite
            width={ViewConfig.heroWidth}
            height={ViewConfig.heroHeight}
            image={hero.url}
            anchor={0.5}
            x={site.x}
            y={site.y}
            ref={aysis.current as any}
            // 12 是速率, Myth.Deg 是 1度，左表达式是控制方向，8是振幅
            rotation={Math.sin(Myth.Deg * i.tick * 12) * Myth.Deg * 3}
          />
        </Container>
        <Container position={[200, 150]}>
          {/* <Text
          //@ts-ignore
            style={{
              fill: 0xffffff,
              fontSize: 24,
              fontFamily: "Arial",
              stroke: 0x000000,
              strokeThickness: 4,
            }}
            text="Hello World"
            anchor={0.5}
            filters={[blurFilter]}
          /> */}
        </Container>
      </Stage>
    </div>
  );
});

export default View;
